import 'package:flutter/material.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';

import '../Utils/color_utils.dart';

class ChatBar extends StatefulWidget {
  const ChatBar({
    super.key,
    required this.chatItemsInfo,
    required this.selectedIndex,
    required this.onSelect,
    required this.onDelete,
    this.hoveringColor,
  });
  final List chatItemsInfo;
  final int selectedIndex;
  final ValueChanged<int> onSelect;
  final ValueChanged<int> onDelete;
  final Color? hoveringColor;

  @override
  State<ChatBar> createState() => _ChatBarState();
}

class _ChatBarState extends State<ChatBar> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: double.infinity,
      padding: const EdgeInsets.only(top: 20),
      child: SingleChildScrollView(
        child: Column(
          children: widget.chatItemsInfo.map(
            (item) => ChatBarItem(
              chatItemsInfo: widget.chatItemsInfo,
              item: item,
              hoveringColor: widget.hoveringColor,
              active: widget.selectedIndex == widget.chatItemsInfo.indexOf(item),
              onSelect: widget.onSelect,
              onDelete: widget.onDelete,
            ),
          ).toList(),
        ),
      ),
    );
  }
}

class ChatBarItem extends StatefulWidget {
  const ChatBarItem({
    super.key,
    required this.chatItemsInfo,
    required this.active,
    required this.item,
    required this.onSelect,
    required this.onDelete,
    this.hoveringColor,
  });
  final List chatItemsInfo;
  final bool active;
  final ChatItemInfo item;
  final ValueChanged<int> onSelect;
  final ValueChanged<int> onDelete;
  final Color? hoveringColor;

  @override
  State<ChatBarItem> createState() => _ChatBarItemState();
}

class _ChatBarItemState extends State<ChatBarItem> {
  bool _hovering = false;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onSecondaryTapUp: (detail) {
        SmartDialog.showAttach(
          targetContext: null,
          targetBuilder: (Offset targetOffset, Size targetSize) {
            Offset offset = const Offset(100, 0);
            return detail.globalPosition + offset;
          },
          usePenetrate: true,
          useAnimation: false,
          keepSingle: true,
          builder: (_) {
            return GestureDetector(
              onTap: () {
                SmartDialog.dismiss();
                SmartDialog.showToast('点击dialog',displayType: SmartToastType.last);
              },
              child: Container(
                width: 200,
                height: 500,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(4),
                  color: YZMColors.color_black_40,
                ),
              ),
            );
          },
        );
      },
      child: Container(
        margin: const EdgeInsets.symmetric(horizontal: 12,vertical: 5),
        width: double.infinity,
        decoration: BoxDecoration(
          color: widget.active || _hovering ? (widget.hoveringColor ?? YZMColors.transparent) : YZMColors.transparent,
          borderRadius: BorderRadius.circular(12),
        ),
        child: MouseRegion(
          onEnter: (event) {
            setState(() {
              _hovering = true;
            });
          },
          onExit: (event) {
            setState(() {
              _hovering = false;
            });
          },
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              widget.onSelect(widget.chatItemsInfo.indexOf(widget.item));
            },
            child: Container(
              padding: const EdgeInsets.all(12),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  _hovering ? GestureDetector(
                    onTap: () {
                      widget.onDelete(widget.chatItemsInfo.indexOf(widget.item));
                    },
                    child: Image.asset(
                      'assets/images/shut_down.png',
                      width: 8,
                      height: 8,
                    ),
                  ) : const SizedBox(width: 8),
                  const SizedBox(
                    width: 8,
                  ),
                  Image.asset(
                    widget.item.icon,
                    width: 24,
                    height: 24,
                  ),
                  const SizedBox(
                    width: 8,
                  ),
                  Text(
                    widget.item.label,
                    style: const TextStyle(
                      color: YZMColors.color_black,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class ChatItemInfo {
  String label;
  String icon;

  ChatItemInfo({
    required this.label,
    required this.icon,
  });
}